<template>
  <div id="app">
    <van-tabbar v-model="active" fixed>
      <van-tabbar-item to="/aa" icon="home-o">标签1</van-tabbar-item>
      <van-tabbar-item to="/bb" icon="search">标签2</van-tabbar-item>
      <van-tabbar-item to="/cc" icon="friends-o">标签3</van-tabbar-item>
      <van-tabbar-item to="/dd" icon="setting-o">标签4</van-tabbar-item>
    </van-tabbar>
    <!-- 这里显示路由对应的组件 -->
    <transition>
      <router-view/>
    </transition>
    <hr>
    <!-- 这里是直接引入的组件 -->
    <sis></sis>
    <!-- w我是表妹 -->
    <curson></curson>
  </div>
</template>

<script>
import sis from "@/components/sister";
import curson from "@/components/curson";
export default {
  data() {
    return {
      active: 0,
      appMsg: "我是app组件中的值"
    };
  },
  components: {
    sis,
    curson
  }
};
</script>


<style lang="less" scoped>
.v-enter,
.v-leave-to {
  transform: translate(100%);
  opacity: 0;
  overflow: hidden;
}

.v-enter-active,
.v-leave-active {
  opacity: 1;
  transition: all 1s;
}

.v-enter-to,
.v-leave {
  transform: translate(-100%);
  opacity: 0;
}

#app {
  width: 100%;
  overflow: hidden;
  padding-bottom: 150px;
}
</style>
